<template>
  <Row>
    <Col span="10" order="1">
    <resource_tree style="margin-top: 20px;margin-left: 20px;"
                   :tree_data="tree_data"
                   @onLoadTreeData="loadTreeData"
                   @onNodeClick="nodeClick"
                   :isMultiple="isMultiple"
                   ref="resource_tree"></resource_tree>
    </Col>
    <Col span="14" order="2">

    <Alert type="success" style="margin-top: 20px;">权限基本信息</Alert>

    <Form :label-width="80">
      <FormItem label="权限名称">
        <Input v-model="form_resource_name" readonly></Input>
      </FormItem>

      <FormItem label="权限编号">
        <Input v-model="form_resource_url" readonly></Input>
      </FormItem>

      <FormItem label="权限排序">
        <Input v-model="form_resource_tindex" readonly></Input>
      </FormItem>

      <FormItem label="权限图标">
        <Icon :type="form_resource_icon" size="20"></Icon>
      </FormItem>

      <FormItem>
        <Button type="info" icon="android-add-circle" shape="circle"
                @click="add_resource" :disabled="btn_disabled">增加
        </Button>
        <Button type="info" icon="edit" shape="circle"
                @click="update_resource" :disabled="btn_disabled">修改
        </Button>
        <Button type="info" icon="trash-a" shape="circle"
                @click="delete_resource" :disabled="btn_disabled">删除
        </Button>
      </FormItem>
    </Form>

    </Col>
  </Row>
</template>
<script>
  //引入机构树组件
  import resource_tree from '../utils/tree_components_util'

  export default {
    data() {
      return {
        tree_data: [],
        form_resource_name: '',
        form_resource_url: '',
        form_resource_tindex: '',
        form_resource_icon: '',
        current_node: {},
        //增加、修改、删除按钮是否禁用
        btn_disabled: true,
        isMultiple: false
      }
    },
    components: {
      resource_tree: resource_tree
    },
    beforeCreate: function () {
      this.$Spin.show();
    },
    created: function () {
      //加载树型结构数据
      this.loadTreeData();
      //获得当前登录用户在当前页面中可以看到的按钮
      this.get_page_permissions();
    },
    methods: {
      /**
       * 异步加载树型数据的方法
       * @备注
       *        这个方法在页面加载成功后或者是异步加载树节点的时候都会调用
       *        只有在异步加载树节点时，两个参数才会有值，异步加载树节点是在tree_components_util.vue里调用的
       * @param item 选中节点信息
       * @param callback 执行 load-data 的第二个参数，将需要添加的数据传入
       */
      loadTreeData: function (item, callback) {
        var parentid = '-1';
        if (item != undefined) {
          parentid = item.id;
        }

        this.$http.post(this.apiUrl() + "resource/tree/", {
          parent_id: parentid
        }, {
          emulateJSON: true
        }).then((response) => {
          /**
           * @备注:
           * 1. item如果不等于undefined,表示是树异步加载调用的，那么item即表示当前展开的节点
           * 2. 追加数据的时候其实是加开item节点的子节点，就应该用callback(response.body)追加数据
           * 3. 否则表示是第一次执行，那么直接this.tree_data = response.body给树的数据赋值
           */
          if (item != undefined) {
            callback(response.body);
          } else {
            this.tree_data = response.body;
          }
          this.$Spin.hide();
        });
      },
      /**
       * 增加权限
       */
      add_resource: function () {
        var id = this.current_node.id;
        this.$emit('childClickMenu', '系统管理', '权限管理', 'resource_edit', {"id": '', "parentid": id});
      },
      /**
       * 修改用户
       */
      update_resource: function () {
        var id = this.current_node.id;
        this.$emit('childClickMenu', '系统管理', '权限管理', 'resource_edit', {"id": id, "parentid": ""});
      },
      /**
       * 删除用户
       */
      delete_resource: function () {
        const current = this.current_node;

        this.$http.delete(this.apiUrl() + 'resource/delete/' + current.id, {}, {
          emulateJSON: true
        }).then((response) => {
          if (response && response.body.success) {
            const children = current.children;
            if (children) {
              this.tree_data.splice(this.current_node.index, 1);
            } else {
              for (var i = 0; i < this.tree_data.length; i++) {
                if (this.tree_data[i].children && this.tree_data[i].children.length > 0) {
                  this.tree_data[i].children.splice(this.current_node.index, 1)
                }
              }
            }
            this.$Message.success(response.body.msg);
            this.form_resource_name = "";
            this.form_resource_tindex = "";
            this.form_resource_url = "";
            this.btn_disabled = true;
          } else {
            if (response.body.msg === 'session-timeout') {
              window.location.href = "/";
            } else {
              this.$Notice.error({title: "错误", desc: response.body.msg});
            }
          }
        });
      },
      /**
       * 获得用户权限，查看用户在当前页面可能看到的按钮
       */
      get_page_permissions: function () {
        const _this = this;

      },
      /**
       * 点击树节点
       */
      nodeClick: function (node) {
        //增加、修改、删除按钮恢复使用
        this.btn_disabled = false;

        this.current_node = node;
        const id = node.id;
        this.$http.get(this.apiUrl() + 'resource/get/' + id, {}, {
          emulateJSON: true
        }).then((response) => {
          if (response && response.body.success) {
            this.form_resource_name = response.body.resource.name;
            this.form_resource_tindex = response.body.resource.tindex;
            this.form_resource_url = response.body.resource.url;
            this.form_resource_icon = response.body.resource.icon;
          } else {
            if (response.body.msg === 'session-timeout') {
              console.info("跳转到登录页!!");
              window.location.href = "/";
            } else {
              this.$Notice.error({title: "错误", desc: response.body.msg});
            }
          }
        });
      },
      click_ok: function () {
        this.$refs['resource_form'].validate((valid) => {
          if (valid) {
            this.$Message.success('Success!');
          } else {
            this.$Message.error('Fail!');
            return;
          }
        });
      }
    }
  }
</script>
<style scoped>

</style>
